<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="560px"
    @open="handleDialogOpen()"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first"></el-tab-pane>

      <el-form
        :model="EvalModel"
        :rules="formEval"
        ref="evalForm"
        label-width="80px"
        label-position="right"
        size="small"
      >
        <el-form-item label="评估姓名" prop="ateName">
          <el-col :span="16"
            ><el-input
              ref="ateName"
              :maxlength="32"
              v-model="EvalModel.ateName"
              autofocus
            ></el-input
          ></el-col>
        </el-form-item>

        <el-form-item label="评估结果" prop="ateResult">
          <el-col :span="16"
            ><el-input
              ref="ateResult"
              :maxlength="32"
              v-model="EvalModel.ateResult"
            ></el-input
          ></el-col>
        </el-form-item>

        <el-form-item label="组合" prop="ateGroup">
          <el-col :span="16"
            ><el-input
              :maxlength="32"
              v-model="EvalModel.ateGroup"
              ref="ateGroup"
            ></el-input
          ></el-col>
        </el-form-item>

        <el-form-item label="建议" prop="ateSuggest">
          <el-input
            ref="ateSuggest"
            resize="none"
            type="textarea"
            v-model="EvalModel.ateSuggest"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="ateRemark">
          <el-input
            ref="ateRemark"
            resize="none"
            type="textarea"
            v-model="EvalModel.ateRemark"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="ateState">
          <el-switch
            v-model="EvalModel.ateState"
            active-color="green"
            inactive-color="red"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="submitForm('evalForm')"
        >保 存</el-button
      >
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addEval, updateEval } from "@/api/Repository/evaluate";

export default {
  name: "role-edit",
  data() {
    return {
      //选项卡
      activeName: "first",

      EvalModel: [
        {
          id: "",
          ateName: "",
          ateResult: "",
          ateGroup: "",
          ateSuggest: "",
          ateRemark: "",
          ateState: ""
        }
      ],

      locked: false,
      dialogProps: {
        visible: false,
        action: "",
        title: ""
      },
      formEval: {
        ateName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 32, message: "长度在 2 到 32 个字符", trigger: "blur" }
        ],
        ateResult: [{ required: true, message: "请输入结果", trigger: "blur" }],
        // ateGroup: [{ required: true, message: "请输入组合", trigger: "blur" }],
        ateSuggest: [{ required: true, message: "请输入建议", trigger: "blur" }]
        // ateRemark: [{ required: true, message: "请输入备注", trigger: "blur" }]
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveRole();
          } else {
            this.doUpdateRole();
          }
        } else {
          return false;
        }
      });
    },
    doUpdateRole() {
      updateEval(this.EvalModel.id, this.EvalModel)
        .then(response => {
          this.dialogProps.visible = false;
          if (response.data > 0) {
            this.$emit("save-finished");
            this.$message({
              message: "修改成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message.error("修改失败");
        });
    },
    doSaveRole() {
      addEval(this.EvalModel)
        .then(response => {
          this.locked = false;
          this.dialogProps.visible = false;
          if (response.data > 0) {
            this.$emit("save-finished");
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message.error("添加失败");
        });
    },

    handleDialogClose() {
      this.dialogProps.visible = false;
    },

    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["evalForm"].clearValidate();
        this.$refs["ateName"].focus();
      });
    },

    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditEvalDialog", function(eModel) {
        this.EvalModel = eModel;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "编辑";
        this.dialogProps.visible = true;
      });
      this.$on("openAddEvalDialog", function() {
        this.dialogProps.action = "add";
        this.dialogProps.title = "新增";
        this.EvalModel = {};
        this.dialogProps.visible = true;
      });
    });
  }
};
</script>

